<template>
  <a-layout style="padding:24px;">
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '1000px'
      }"
    >
      <a-breadcrumb style="margin: 0 0 16px 0">
        <a-breadcrumb-item>首页</a-breadcrumb-item>
        <a-breadcrumb-item>系统管理</a-breadcrumb-item>
        <a-breadcrumb-item>用户管理</a-breadcrumb-item>
        <a-breadcrumb-item>用户详情</a-breadcrumb-item>
      </a-breadcrumb>
      <a-form-model
        :model="userDetail"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="编号">
          <a-input v-model="userDetail.id" :disabled="true" />
        </a-form-model-item>
        <a-form-model-item label="用户名">
          <a-input v-model="userDetail.username" :disabled="true" />
        </a-form-model-item>
        <a-form-model-item label="昵称">
          <a-input v-model="userDetail.nickname" />
        </a-form-model-item>
        <a-form-model-item label="邮箱">
          <a-input v-model="userDetail.email" />
        </a-form-model-item>
        <a-form-model-item label="生日">
          <a-date-picker
            v-model="userDetail.birthday"
            :default-value="moment('2015-06-06', dateFormat)"
            :locale="locale"
            @change="changeBirthday"
            style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item label="头像">
          <a-avatar
            :size="64"
            icon="user"
            :src="userDetail.avatar"
            shape="square"
          />
        </a-form-model-item>
        <a-form-model-item label="头像Url">
          <a-input v-model="userDetail.avatar" />
        </a-form-model-item>
        <a-form-model-item label="创建时间">
          <a-input v-model="userDetail.createTime" :disabled="true" />
        </a-form-model-item>
        <a-form-model-item label="是否是管理员" prop="isAdmin">
          <a-switch v-model="userDetail.isAdmin" />
        </a-form-model-item>
        <a-form-model-item label="是否激活">
          <a-switch v-model="userDetail.isActive" />
        </a-form-model-item>
        <a-form-model-item label="上次登录IP">
          <a-input v-model="userDetail.loginIp" :disabled="true" />
        </a-form-model-item>
        <a-form-model-item label="上次登录时间">
          <a-input v-model="userDetail.loginTime" :disabled="true" />
        </a-form-model-item>
      </a-form-model>
      <div class="footer">
        <a-popconfirm
          placement="top"
          title="确定更新用户信息？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="updateUser"
        >
          <a-button type="primary">更新</a-button>
        </a-popconfirm>
        <a-popconfirm
          placement="top"
          title="确定删除用户信息？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteUser"
        >
          <a-button type="danger">删除</a-button>
        </a-popconfirm>
        <a-button @click="close">返回</a-button>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import moment from "moment";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import "moment/locale/zh-cn";

export default {
  name: "UserDetail",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      dateFormat: "YYYY-MM-DD",
      userDetail: {},
      locale
    };
  },
  mounted() {
    this.getUserDetail();
  },
  methods: {
    moment,
    getUserDetail() {
      this.$get(`/user/${this.$route.params.id}`).then(response => {
        if (response.code === 200) {
          this.userDetail = response.data;
        }
      });
    },
    updateUser() {
      this.$put(`/user/${this.$route.params.id}`, this.userDetail).then(
        response => {
          if (response.code === 200) {
            this.$message.success("更新成功");
          }
        }
      );
    },
    deleteUser() {
      this.$del(`/user/${this.$route.params.id}`).then(response => {
        if (response.code === 200) {
          this.$message.success("删除成功");
          this.close();
        }
      });
    },
    close() {
      this.$router.push("/user");
    },
    changeBirthday(date, dateString) {
      this.userDetail.birthday = dateString;
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  text-align: left;
}
.footer {
  text-align: center;
  button {
    margin: 10px;
  }
}
</style>
